<template>
  <div class="communityContainer">
    <div class="community">
      <div class="right">
        <div class="article" v-loading="isDataLoad">
          <div
              class="articleItem"
              v-for="(item, index) in articleList"
              :key="index"
              @click="
              $router.push({ name: 'article', params: { id: item.articleId } })
            "
          >
            <div class="userAvatar">
              <img
                  :src="
                  item.avatar && item.avatar != ''
                    ? item.avatar
                    : require('assets/img/defaultAvatar.jpg')
                "
                  alt=""
                  lazy
                  fit="cover"
              />
            </div>
            <div class="ItemCenter">
              <h3 style="margin:0">{{ item.articleTitle }}</h3>
              <div class="publishDate">
                {{ item.createTime | handleArticleDateShow }}
              </div>
              <div
                  class="content mdContent"
                  v-html="handleMarkDown(item.articleContent)"
              ></div>

              <div style="padding-top: 15px;">
                <i class="iconfont icon-kuaisuhuifu"></i>
                {{ item.commentNum }}
                <i class="iconfont icon-dianzan"></i>
                {{ item.likeNum }}
                <i class="iconfont icon-denglu2"></i>
                {{ item.authorNickname }}
              </div>
            </div>
            <div class="articleImg">
              <img
                  v-if="item.articleImage != ''"
                  :src="item.articleImage"
                  class="articleImgItem"
                  fit="contain"
                  lazy
              />
            </div>

          </div>
        </div>

        <div
            class="nullTips"
            v-if="articleList.length == 0 && isDataLoad == false"
        >
          Article Not Found !
        </div>

        <div class="bottom" v-if="!isDataLoad && articleList.length !== 0">
          <!-- 分页组件 -->
          <el-pagination
              background
              layout="prev, pager, next"
              :total="totalCount"
              :current-page="this.$route.query.page * 1"
              @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 返回顶部组件 -->
    <go-top></go-top>
  </div>
</template>

<script>
import MarkDownIt from "markdown-it";

import {handleArticleDateShow} from "plugins/utils.js";
import GoTop from "components/goTop/GoTop.vue";

export default {
  name: "community",
  components: {
    GoTop,
  },
  data() {
    return {
      // 文章数据
      articleList: [],
      // 总条数
      totalCount: 0,
      // 是否正在加载数据
      isDataLoad: true,
    };
  },
  methods: {

    // 搜索文章
    async searchArticle() {
      this.isDataLoad = true;
      let res = await this.$request(
          `/dqarticle/superlist?articleTitle=${this.$route.query.articleTitle}`,
          {pageNum: 1, pageSize: 10}
      );
      console.log(res);
      if (res.data.code == 200) {
        this.totalCount = res.data.data.total;
        this.articleList = res.data.data.list;
      } else if (res.data.code == 404) {
        // 未查询到文章
        this.totalCount = 0;
        this.articleList = [];
      }
      this.isDataLoad = false;
    },

    handleMarkDown(content) {
      let md = new MarkDownIt();
      let result = md.render(content);
      return result;
    },
  },
  computed: {},
  filters: {
    handleArticleDateShow,
  },
  watch: {
    // 这里监听路由的参数 因为index的router-view中的key绑定的是$route.path 所以在community页面中搜索 只是改变了query参数 是监听不到的
    // 但也不能在index的router-view中的key绑定$route.fullPath 不然分页等操作也会导致整个页面的刷新
    "$route.query"(current) {
      // console.log(this.$route);
      // 如果存在articlTitle 并且不存在typeId
      if (current.articleTitle) {
        console.log(current.articleTitle);
        this.searchArticle();
      } else {
        this.$message.info("请输入文章标题!");
      }
    },
  },
  created() {
    // 查询文章列表数据
    this.searchArticle();
  },
};
</script>

<style scoped>
.communityContainer {
  display: flex;
  justify-content: center;
  font-size: 15px;
}

.community {
  display: flex;
  max-width: 1200px;
  width: 85vw;
}

.right {
  padding: 10px 20px 20px;
  width: calc(100%);
}

.writeButton {
  width: 100%;
  margin-bottom: 10px;
}

.sortItem {
  margin: 15px 0;
  cursor: pointer;
}

.currentItem {
  color: #18365b;
  font-weight: 600;
}

.articleItem {
  display: flex;
  position: relative;
  border-bottom: 1px solid #eee;
  padding: 20px 20px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.15s;
}

.articleItem:hover {
  background-color: #f2f6fb;
}

.userAvatar {
  width: 45px;
}

.userAvatar img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.ItemCenter {
  width: 700px;
  margin: 0 10px;
}

.ItemCenter div {
  margin-bottom: 1px;
  line-height: 18px;
}

.title {
  color: rgb(43, 43, 43);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.publishDate {
  color: rgb(136, 136, 136);
  margin: 4px 0;
  font-size: 12px;
}

.content {
  color: rgb(136, 136, 136);
  font-size: 14px;
  line-height: 19px;
  /* 两行溢出 */
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.articleImg {
  margin: 15px 0 10px;
  display: flex;
  justify-content: flex-start;
}

.articleImg img {
  border-radius: 5px;
}

.articleImgItem {
  height: 100px;
  width: auto;
  margin-right: 10px;
}

.articleImgItem /deep/ .el-image__inner {
  width: unset;
}

.ItemRight {
  width: 45px;
  font-size: 14px;
  color: rgb(83, 83, 83);
  position: absolute;
  right: 10px;
}

.tips {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: rgb(158, 158, 158);
  margin: 20px 0;
}

.bottom {
  width: 100%;
  text-align: center;
  margin: 40px 0;
}

.communityContainer /deep/ .el-loading-spinner {
  margin-top: 80px;
}

.nullTips {
  text-align: center;
  margin-top: 20vh;
  color: #666;
  letter-spacing: 1px;
}
</style>
